<template>
  <div class="app-container">
    <el-button @click="tj()" v-show="listShow">添加通知</el-button>
    <el-table
      style="margin-top: 10px;"
      v-loading="listLoading"
      v-show="listShow"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="标题">
        <template slot-scope="scope">
          <span @click="title(scope.row.announcementID)">
          {{ scope.row.title }}
            </span>
        </template>
      </el-table-column>
      <el-table-column label="发布人" align="center">
        <template slot-scope="scope">
          {{ scope.row.userName }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.isEnabled == 1">
            发布
          </span>
          <span v-else>
            未发布
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="发布时间">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.postDate }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="small"
            @click="xg(scope.row.announcementID)">
            修改
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row.announcementID)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-show="listShow"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.pageNum"
      :page-size="this.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total"
      :page-sizes="[5, 10, 20]"
    />

    <!--  新增  -->
    <el-form
      :model="addAnnouncementList"
      :rules="rules"
      ref="formRef"
      v-show="addlistLoading"
      label-width="auto"
      style="max-width: 600px;margin-top: 10px">
      <el-form-item
        label="标题"
        prop="title"
      >
        <el-input
          v-model="addAnnouncementList.title"
          type="text"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item
        label="过期日期"
        prop="expirationDate"
      >
        <el-date-picker
          v-model="addAnnouncementList.expirationDate"
          type="datetime"
          placeholder="过期日期"
        />
      </el-form-item>

      <el-form-item
        label="紧急情况"
        prop="urgency"
      >
        <input type="radio" id="option1" value="紧急" v-model="addAnnouncementList.urgency">
        <label for="option1">&nbsp;&nbsp;紧急</label>
        <input type="radio" style="margin-left: 20px;" id="option2" value="一般" v-model="addAnnouncementList.urgency">
        <label for="option2">&nbsp;&nbsp;一般</label>
      </el-form-item>

      <el-form-item
        label="发布时间">
        <el-date-picker
          v-model="addAnnouncementList.postDate"
          disabled="disabled"
          type="datetime"
          placeholder="发布时间"
        />
      </el-form-item>


      <el-form-item
        label="发布人"
        prop="transactionprice"
      >
        <el-input
          v-model="addAnnouncementList.userName"
          disabled="disabled"
          type="text"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item
        label="内容"
        prop="content"
      >
        <el-input
          v-model="addAnnouncementList.content"
          type="textarea"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(1)">发布</el-button>
        <el-button type="danger" @click="submitForm(2)">保存</el-button>
        <el-button @click="qx()">返回</el-button>
      </el-form-item>
    </el-form>

    <!--  修改  -->
    <el-form
      v-model="updateAnnouncementList"
      v-show="updatelistLoading"
      label-width="auto"
      style="max-width: 600px;margin-top: 10px">
      <el-form-item
        label="标题"
        prop="id"
      >
        <el-input
          v-model="updateAnnouncementList.title"
          type="text"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item
        label="过期日期"
        prop="date"
      >
        <el-date-picker
          v-model="updateAnnouncementList.expirationDate"
          type="datetime"
          placeholder="过期日期"
        />
      </el-form-item>

      <el-form-item
        label="紧急情况"
      >
        <el-radio-group v-model="updateAnnouncementList.urgency">
          <el-radio :label="'紧急'" :value="紧急">紧急</el-radio>
          <el-radio :label="'一般'" :value="一般">一般</el-radio>
        </el-radio-group>

      </el-form-item>

      <el-form-item
        label="发布时间">
        <el-date-picker
          v-model="updateAnnouncementList.postDate"
          disabled="disabled"
          type="datetime"
          placeholder="发布时间"
        />
      </el-form-item>


      <el-form-item
        label="发布人"
        prop="transactionprice"
      >
        <el-input
          v-model="updateAnnouncementList.userName"
          disabled="disabled"
          type="text"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item
        label="内容"
        prop="purchasingprice"
      >
        <el-input
          v-model="updateAnnouncementList.content"
          type="textarea"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="updateForm(1)">发布</el-button>
        <el-button type="danger" @click="updateForm(2)">修改</el-button>
        <el-button @click="qx()">返回</el-button>
      </el-form-item>
    </el-form>

    <!--  内容  -->
    <el-dialog
      v-model="titleList"
      :title="titleList.title"
      :visible.sync="titlelistLoading"
      style="max-width: 100%;text-align:center;font-size: 20px;">
      <div style="height: 300px;">
        <span style="float: right">
          发布日期:{{ titleList.postDate }}
        </span>
        <br>
        <hr>
        {{ titleList.content }}
      </div>
    </el-dialog>
  </div>


</template>

<script>
import {announcementsGetId, getAnnouncementList, getUserAll, handleDelete, submitForm, updateForm} from '@/api/table'
import con from 'js-cookie'
import th from "element-ui/src/locale/lang/th";

export default {
  computed: {
    th() {
      return th
    }
  },
  data() {
    return {
      total: 0,
      listShow: true,
      PostDate: new Date(),
      pages: 0,
      pageSize: 5,
      pageNum: 1,
      urgency: "一般",
      userList: [],
      list: [],
      addAnnouncementList: {},
      updateAnnouncementList: [],
      titleList: [],
      addlistLoading: false,
      updatelistLoading: false,
      titlelistLoading: false,
      listLoading: true,
      cons: JSON.parse(con.get("SET_USERS")),
      rules: {
        title: [
          { required: true, message: '标题为必填项', trigger: 'blur' },
          { min: 2, max: 50, message: '标题长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        expirationDate: [
          { required: true, message: '过期日期为必填项', trigger: 'blur' }
        ],
        urgency: [
          { required: true, message: '紧急情况为必填项', trigger: 'change' }
        ],
        content: [
          { required: true, message: '内容为必填项', trigger: 'blur' }
        ]
      },
    }
  },
  created() {
    this.getUserAll();
    this.fetchData();
  },
  methods: {
    title(id) {
      this.addlistLoading = false;
      this.updatelistLoading = false;
      this.titlelistLoading = true;
      announcementsGetId(id).then(data => {
        this.titleList = data.data
        console.log(this.titleList)
        console.log(this.titleList.title)
      })
    },
    tj() {
      this.addAnnouncementList.userName = this.cons.userName
      this.addAnnouncementList.postDate = this.PostDate
      this.updateAnnouncementList.userName = this.cons.userName
      this.updateAnnouncementList.urgency = this.urgency
      this.addlistLoading = true;
      this.listShow = false;
      this.updatelistLoading = false;
      this.titlelistLoading = false;
    },
    xg(id) {
      this.updatelistLoading = true;
      this.listShow = false;
      this.addlistLoading = false;
      this.titlelistLoading = false;
      this.announcementsGetId(id)
    },
    qx() {
      this.addlistLoading = false;
      this.updatelistLoading = false;
      this.titlelistLoading = false;
      this.listShow = true;
      this.fetchData()
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.fetchData();
    },
    fetchData() {
      this.listLoading = true;
      this.addlistLoading = false;
      this.updatelistLoading = false;
      this.titlelistLoading = false;
      getAnnouncementList(this.pageNum, this.pageSize).then(response => {
        console.log(response)
        this.total = response.data.total
        this.pages = response.data.pages
        this.list = response.data.list
        this.listLoading = false;
      })
    },
    getUserAll() {
      getUserAll().then(response => {
        this.userList = response.data.list
      })
    },
    handleDelete(announcementID) {
      if (confirm("是否删除")) {
        console.log(announcementID)
        handleDelete(announcementID).then(data => {
          console.log(data)
          if (data.data.result) {
            alert("删除成功")
          } else {
            alert("删除失败")
          }
          window.location.reload();
        })
      }
    },
    submitForm(num) {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          var date = new Date(this.addAnnouncementList.expirationDate);
          var date2 = new Date(this.addAnnouncementList.postDate);
          this.addAnnouncementList.expirationDate = date.getFullYear() + "-"
            + (date.getMonth() + 1) + "-" + date.getDate() + " "
            + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
          this.addAnnouncementList.postDate = date2.getFullYear() + "-"
            + (date2.getMonth() + 1) + "-" + date2.getDate() + " "
            + date2.getHours() + ":" + date2.getMinutes() + ":" + date2.getSeconds()
          console.log(num)
          if (num === 1) {
            this.addAnnouncementList.isEnabled = 1;
          }
          submitForm(this.addAnnouncementList).then(data => {
            console.log(data)
            if (data.data.result) {
              alert("新增成功")
            } else {
              alert("新增失败")
            }
            window.location.reload();
          })
        } else {
          alert("新增失败")
          return false;
        }
      })
    },
    announcementsGetId(id) {
      announcementsGetId(id).then(data => {
        this.updateAnnouncementList = data.data
        console.log(this.updateAnnouncementList)
        console.log(this.updateAnnouncementList.urgency)
      })
    },
    updateForm(num) {
      var date = new Date(this.updateAnnouncementList.expirationDate);
      var date2 = new Date(this.updateAnnouncementList.postDate);
      this.updateAnnouncementList.expirationDate = date.getFullYear() + "-"
        + (date.getMonth() + 1) + "-" + date.getDate() + " "
        + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
      this.updateAnnouncementList.postDate = date2.getFullYear() + "-"
        + (date2.getMonth() + 1) + "-" + date2.getDate() + " "
        + date2.getHours() + ":" + date2.getMinutes() + ":" + date2.getSeconds()
      if (num === 1) {
        this.updateAnnouncementList.isEnabled = 1;
      }
      updateForm(this.updateAnnouncementList).then(data => {
        console.log(data)
        if (data.data.result) {
          alert("修改成功")
        } else {
          alert("修改失败")
        }
        window.location.reload();
      })
    }
  }
}
</script>
